﻿<div class="page-header">
    <h1>Custom login partial view from the "templates" folder</h1>
</div>

<div class="row" ng-show="model.errorMessage">
    <div class="col-md-12 col-sm-12">
        <div class="alert alert-danger">
            <strong>Error:</strong>
            {{model.errorMessage}}
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6 col-sm-6" ng-show="model.loginUrl">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Local Login</h3>
            </div>
            <div class="panel-body">
                <form name="form" method="post" action="{{model.loginUrl}}">
                    <anti-forgery-token token="model.antiForgery"></anti-forgery-token>

                    <fieldset>
                        <div class="form-group">
                            <label for="username">Username</label>
                            <input required name="username" autofocus id="username" type="text" class="form-control" placeholder="Username" ng-model="model.username" maxlength="100">
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <input required id="password" name="password" type="password" class="form-control" placeholder="Password" ng-model="model.password" maxlength="100" autocomplete="off" focus-if="model.username">
                        </div>
                        <div class="form-group login-remember" ng-show="model.allowRememberMe">
                            <label for="rememberMe">
                                <input type="checkbox" id="rememberMe" name="rememberMe" ng-model="model.rememberMe" value="true">
                                <strong>Remember My Login</strong>
                            </label>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary">Login</button>
                        </div>
                    </fieldset>
                </form>
            </div>
            <ul class="list-unstyled">
                <li ng-repeat="link in model.additionalLinks"><a ng-href="{{link.href}}">{{link.text}}</a></li>
            </ul>
        </div>
    </div>

    <div class="col-md-6 col-sm-6 external-providers" ng-show="model.externalProviders.length">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">External Login</h3>
            </div>
            <div class="panel-body">
                <ul class="list-inline">
                    <li ng-repeat="provider in model.externalProviders">
                        <a class="btn btn-default" href="{{provider.href}}">{{provider.text}}</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

